<!-- 页面链接参数 -->
<template>
    <el-form
        ref="ruleFormRef"
        label-position="top"
        label-width="auto"
        :model="pageParams"
        :rules="targetPageParamsRules"
        class="link-param-wrap"
    >
        <template v-for="(item, index) in targetPageParams" :key="index">
            <el-form-item :prop="item.name">
                <template #label>
                    {{ item.name }}
                </template>

                <el-input v-model="pageParams[item.name]" />
            </el-form-item>
        </template>

        <template v-if="!!targetPageData && [2, 3].includes(targetPageType)">
            <el-button class="add-param-btn" @click="onAddParam">
                <el-icon><icon-add /></el-icon>
                新建页面参数
            </el-button>
        </template>
    </el-form>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import { useEditStore } from '@/store'
import { ElMessage, ElMessageBox } from 'element-plus'
export default defineComponent({
    name: 'LinkParam',
    props: {
        // 事件数据
        eventData: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { eventData } = toRefs(props)
        const editStore = useEditStore()

        const pageRouter = computed({
            get: () => eventData.value?.['inner-page-link'] || '',
            set: val => eventData.value['inner-page-link'] = val
        })
        // 页面参数
        const pageParams = computed({
            get: () => {
                if (eventData.value?.['inner-page-link-params'] === undefined) {
                    eventData.value['inner-page-link-params'] = {}
                }
                return eventData.value['inner-page-link-params']
            },
            set: val => eventData.value['inner-page-link-params'] = val
        })

        const appData = computed(() => editStore.appData)
        // 目标页面数据
        const targetPageData = computed(() => appData.value?.[pageRouter.value])
        // 页面管理列表扁平化
        const cataDataPageFlat = computed(() => editStore.cataDataPageFlat)
        // 目标页类型(1原生页面(不可编辑)，2瓦立页面(可编辑)，3个性化页面(仅可配置))
        const targetPageType = computed(() => cataDataPageFlat.value?.[pageRouter.value]?.data?.type || 2)
        // 模块页面参数
        const modulePageParam = computed(() => cataDataPageFlat.value?.[pageRouter.value]?.data?.parametersJson)
        // 目标页面参数
        const targetPageParams = computed(() => {
            // 本地页面参数
            if (!!targetPageData.value?.dataset?.params) return targetPageData.value?.dataset?.params
            // 模块页面参数
            else if (!!modulePageParam.value) return modulePageParam.value
            return {}
        })
        // 目标页面参数校验规则
        const targetPageParamsRules = computed(() => {
            const rules = {}
            if (!!targetPageParams.value) {
                Object.values(targetPageParams.value).forEach(item => {
                    rules[item.name] = [{ required: item.required, message: '该参数字段必填', trigger: 'blur' }]
                })
            }
            return rules
        })

        // 新增页面参数
        const onAddParam = () => {
            ElMessageBox.prompt('请输入变量标识', '新增页面参数', {
                inputValue: '',
                inputValidator: value => {
                    if (value === '') return '变量标识不能为空'
                    else if (Object.keys(targetPageParams.value || {}).includes(value)) return `变量标识 ${value} 已存在`
                    return true
                }
            }).then(({ value }) => {
                if (!targetPageData.value?.dataset) {
                    targetPageData.value.dataset = {
                        state: {},
                        params: {}
                    }
                }
                targetPageData.value.dataset.params[value] = {
                    name: value,
                    varType: 'params',
                    dataType: 'string',
                    initMethod: {},
                    required: false,
                    sampleValue: '',
                    label: ''
                }
                ElMessage({
                    type: 'success',
                    message: '添加页面参数成功'
                })
            }).catch(() => {})
        }

        return {
            pageRouter,
            pageParams,
            targetPageData,
            targetPageType,
            modulePageParam,
            targetPageParams,
            targetPageParamsRules,

            onAddParam
        }
    }
})
</script>

<style lang="less" scoped>
@import './link-param.less';
</style>